import {Button, Checkbox, Form, Input, Switch} from "antd";
import './index.scss'
import {useSelector, useDispatch} from "react-redux";
import {setDark, setLight} from "../../../../features/htmlState/htmlState.js";

const handleFinish = (values) => {
    console.log('Success:', values);
};
const handleFinishFaild = (values) => {
    console.log('handleFinishFaild:', values);
};

const initValue = () => ({
    remember: true,
    username: 'admin',
    pwd: '123456'
})


export default function Index() {

    const htmlState = useSelector(state => state.htmlState.value);
    const dispatch = useDispatch();
    return (
        <>
            <div className="switch-btn">
                <Switch checkedChildren="阳" unCheckedChildren="阴" onChange={val => val ? dispatch(setDark()) : dispatch(setLight())}/>
            </div>
            <Form
                className='form-wrapper'
                name="BaseInfo"
                labelCol={{span: 8}}
                wrapperCol={{span: 8}}
                initialValues={initValue()}
                onFinish={handleFinish}
                onFinishFailed={handleFinishFaild}
                autoComplete="off"
            >
                <div className="title-box">
                    管理系统
                </div>
                <div className="form-box">
                    <Form.Item
                        label="用户名"
                        name="username"
                        rules={[{required: true, message: '请输入用户名'}]}
                        placeholder="请输入用户名"
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        label="密码"
                        name="pwd"
                        rules={[{required: true, message: '请输入密码'}]}
                        placeholder="请输入密码"
                    >
                        <Input/>
                    </Form.Item>
                    <Form.Item
                        name="remember"
                        valuePropName="checked"
                        wrapperCol={{offset: 8, span: 16}}
                    >
                        <Checkbox>记住我</Checkbox>
                    </Form.Item>

                    <Form.Item wrapperCol={{offset: 4, span: 16}}>
                        <Button type="primary" htmlType="submit" block>
                            登录
                        </Button>
                    </Form.Item>
                </div>
            </Form>
            <div className="bottom">{htmlState}</div>
        </>
    )
}
